<template>
	<view>
		<u-navbar back-text="返回" title="文章搜索"></u-navbar>
		<view style="padding: 18rpx 18rpx 0rpx 18rpx; background-color: #ffffff; ">
			<u-search placeholder="输入关键字搜索" v-model="keyword"
				:action-style="{backgroundColor:'#4CAF50',color:'#ffffff',padding:'12rpx',width:'100rpx',borderRadius:'32rpx'}" @custom="onSearch" @search="onSearch">
			</u-search>
		</view>
		<view style="padding: 24rpx; background-color: #ffffff;">
			<view v-for="(item, index) in list" :key="item.id" style="margin-bottom: 24rpx;display: flex; border-bottom: 1px solid #dbdbdb; padding-bottom: 24rpx;" @click="onClickArticle(item.id)">
				<view style="flex: 1; padding-right: 24rpx;">
					<view style="color: #212121; font-size: 32rpx; height: 165rpx;">
						{{item.title}}
					</view>
					<view style="display: flex;">
						<view style="flex: 1; color: #757575;">
							{{item.createtime}}
						</view>
						<view style="width: 30%; text-align: right; color: #757575;">
							<u-icon name="eye"></u-icon><text style="padding-left: 10rpx;">{{item.click}}</text>
						</view>
					</view>
				</view>
				<view style="width: 200rpx;">
					<u-image width="100%" height="200rpx" border-radius="12" :src="item.cover_image"></u-image>
				</view>
			</view>
			<u-loadmore :status="status" :load-text="loadText" :margin-top="20" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				list:[],
				status: 'loadmore',
				page: 1,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '已全部加载'
				}
			}
		},
		onLoad(option){
			this.keyword = option.keyword;
			this.LoadList();
		},
		methods: {
			LoadList(){
				var that = this;
				this.status = 'loading';
				uni.request({
					url: this.$unishow + 'api/marticle/search',
					method: 'GET',
					data: {
						page: this.page,
						keyword:this.keyword,
					},
					success: res => {
						this.page = ++this.page;
						if (res.data.list.length < 10) {
							that.status = "nomore"
						} else {
							that.status = "loadmore"
						}
						that.list = that.list.concat(res.data.list)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onClickArticle(id){
				console.log(id);
				uni.navigateTo({
					url:'/pages/marticle/view?id='+id
				});
			},
			onSearch(keyword){
				this.keyword = keyword;
				this.list = [];
				this.page = 1;
				this.LoadList();
			}
		}
	}
</script>

<style>

</style>
